import React from "react";
import { Tabbar } from "react-vant";
import { useLocation, useNavigate } from "react-router-dom";
import { RouteRowState } from "../../types";

interface PropsType {
  routes: RouteRowState[];
}

export const Footer: React.FC<PropsType> = ({ routes }) => {
  const { pathname } = useLocation();
  const navigate = useNavigate();
  return (
    <Tabbar
      value={pathname}
      onChange={(name) => navigate(name as string)}
      placeholder
    >
      {routes.map((v, i) => {
        return (
          <Tabbar.Item name={v.path} key={i} icon={v.icon}>
            {v.title}
          </Tabbar.Item>
        );
      })}
    </Tabbar>
  );
};
